<template>
    <van-skeleton title avatar :row="3" :loading="loading" >
        <van-card
                style="height: 120px"
                v-for="user in userList"
                :tag="user.id"
                :desc="user.profile = user.profile !== null ? user.profile : '此人很懒，未写简介'"
                :title="user.username"
                :thumb="user.avatar ? user.avatar :defaultPicture"
                @click="showUser(user.id)"
        >
            <template #tags>
                <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right:10px ">
                    {{tag}}
                </van-tag>
            </template>
<!--            <template #footer>-->
<!--                <van-button size="normal" @click="doApplyAddUser(user.id,user.username)">加好友</van-button>-->
<!--            </template>-->
        <div style="height: 100px"></div>
        </van-card>

        <van-dialog v-model:show="showAddApply" :title="'添加' + userName + '为好友'" @confirm="doApply" show-cancel-button>
            <van-field v-model="remark"  placeholder="请输入备注" />
        </van-dialog>
        <van-empty description="搜索结果为空" v-if="!userList || userList.length < 1"/>
    </van-skeleton>
</template>

<script setup lang="ts">
    //子组件如何接收父组件传过来的参数?
    //使用defineProps
    import {User} from "../models/user";
    import {defineProps, withDefaults, ref, onMounted} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    import {getCurrentUser} from "../service/user";
    import {useRouter} from 'vue-router'
    import {defaultPicture} from '../common/userCommand';

    const router = useRouter()

    interface UserCardListProps {
        loading:boolean
        userList:User[];
    }


    const props = defineProps<UserCardListProps>();

    const showAddApply = ref<boolean>(false)
    //定义备注变量
    const remark = ref('');
    const userName = ref('');

    const userId = ref<number>(0);
    const doApplyAddUser = (id:number,username:string) =>{
        showAddApply.value = true;
        userName.value = username;
        userId.value = id
    }

    //向后端发送申请的请求
    const doApply =async (id:number) =>{
        const res = await myAxois.post("/friend/apply",{
            receiveId: userId.value,
            remark: remark.value
        })
        if(res.data.code === 0){
            showSuccessToast("发送成功")
        }else{
            showFailToast(res.data.msg)
        }
    }

    const showUser = (id:number) =>{
        router.push({
            path:"/user/show",
            query:{
                id
            }
        })
    }
</script>

<style scoped>

</style>